<template>
  <div style="background: #f4f7fd">
    <navbar :showHeaderIcon="true" />
    <div class="app-container">
      <div class="fangxiangSelect" v-if="xmxx.selectTypeName=='3+1+2'">
        方向：
        <el-select v-model="type" placeholder="请选择" @change="shaixuanFx">
          <el-option
            v-for="item in direction"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="page-card top-tabs">
        <div class="page-back" @click="$router.back()">
          <i class="el-icon-arrow-left"></i>
          返回
        </div>
        <el-tabs v-model="activeComponents" @tab-click="handleClick">
          <el-tab-pane label="总分(物理赋分)" name="总分(物理赋分)" v-if="type==2"></el-tab-pane>
          <el-tab-pane label="总分(物理)" name="总分(物理)" v-if="type==2"></el-tab-pane>
          <el-tab-pane label="总分(历史赋分)" name="总分(历史赋分)" v-if="type==1"></el-tab-pane>
          <el-tab-pane label="总分(历史)" name="总分(历史)" v-if="type==1"></el-tab-pane>
          <el-tab-pane label="总分" name="总分" v-if="type==0"></el-tab-pane>
          <el-tab-pane v-for="item in kslb" :key="`subject-${item.name}`" :label="item.name" :name="item.name"></el-tab-pane>
        </el-tabs>
      </div>

      <div class="page-card m-top">
        <h3>班级成绩总览</h3>

        <div class="statistics-box" v-if="schoolAllSore || isSubject || !isSubject || isSingleSubject">
          <div class="statistics-item">
            <el-card class="box-card">
              <div>
                <p>参考总人数</p>
                <p>{{ schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.studentCount || 0 }}</p>
              </div>
            </el-card>
          </div>
          <div class="statistics-item">
            <el-card class="box-card">
              <div>
                <p>满分</p>
                <p>{{ schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.fullScore || 0 }}</p>
              </div>
            </el-card>
          </div>
          <div class="statistics-item" v-if="!isSingleSubject">
            <el-card class="box-card">
              <div>
                <p>最高分</p>
                <p>{{ schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.highScore || 0 }}</p>
              </div>
            </el-card>
          </div>
          <div class="statistics-item" v-if="isSingleSubject">
              <el-card class="box-card">
                <div>
                  <p>难度</p>
                  <p>{{ schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.difficulty || 0 }}</p>
                </div>
              </el-card>
            </div>
            <div class="statistics-item" v-if="isSingleSubject">
              <el-card class="box-card">
                <div>
                  <p>信度</p>
                  <p>{{schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.believe || 0}}</p>
                </div>
              </el-card>
            </div>
            <div class="statistics-item" v-if="isSingleSubject">
              <el-card class="box-card">
                <div>
                  <p>区分度</p>
                  <p>{{schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.discrimination || 0}}</p>
                </div>
              </el-card>
            </div>
          <div class="statistics-item" v-if="!isSingleSubject">
            <el-card class="box-card">
              <div>
                <p>最低分</p>
                <p>{{schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.lowScore || 0}}</p>
              </div>
            </el-card>
          </div>
          <div class="statistics-item" v-if="!isSingleSubject">
            <el-card class="box-card">
              <div>
                <p>平均分</p>
                <p>{{schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.avgScore || 0}}</p>
              </div>
            </el-card>
          </div>
          <div class="statistics-item" v-if="!isSingleSubject">
            <el-card class="box-card">
              <div>
                <p>标准差</p>
                <p>{{schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.deviationScore || 0}}</p>
              </div>
            </el-card>
          </div>
        </div>
        <!-- 单科 -->
        <div v-show="isSingleSubject">
          <div class="snippet mini m-top" style="padding:20px;">
              本学科试卷共{{getQuestionStatsObj.totalSize}} 道题目，总分 {{getQuestionStatsObj.totalScore}} ， 主观题 {{getQuestionStatsObj.subjectiveSize}} 道，分值占比 {{getQuestionStatsObj.subjectiveRate}} %，客观题 {{getQuestionStatsObj.objectiveSize}} 道，分值占比 {{getQuestionStatsObj.objectiveRate}} % 
          </div>
          <el-table border stripe :data="schoolAllSoreList">
              <el-table-column align="center" label="统计单位" prop="statusName"></el-table-column>
              <el-table-column align="center" label="人数" prop="studentCount"></el-table-column>
              <el-table-column align="center" label="最高分" prop="highScore"></el-table-column>
              <el-table-column align="center" label="平均分" prop="avgScore"></el-table-column>
              <el-table-column align="center" label="标准差" prop="deviationScore"></el-table-column>
              <el-table-column align="center" label="众数" prop="mostScore"></el-table-column>
              <el-table-column align="center" label="中位数" prop="medianScore"></el-table-column>
              <el-table-column align="center" label="难度">
                <template slot-scope="scope">
                  {{scope.row.difficulty}}%
                </template>
              </el-table-column>
              <el-table-column align="center" label="区分度">
                <template slot-scope="scope">
                  {{scope.row.discrimination}}%
                </template>
              </el-table-column>
              <el-table-column align="center" label="信度">
                <template slot-scope="scope">
                  {{scope.row.believe}}%
                </template>
              </el-table-column>
          </el-table>
          <h3>试题得分率</h3>
          <div class="echarts-box" ref="mcfddbChart" style="width: 1200px; height: 400px"></div>
          <el-table 
              border 
              stripe
              :data="tableDatarate"
              style="width: 100%; margin-top: 20px;"
              v-if="questionHeaders.length > 0"
            >
              <el-table-column align="center" label="维度" width="120">
                <template slot-scope="scope">
                  {{ scope.row.dimension }}
                </template>
              </el-table-column>
              <el-table-column 
                v-for="(question, index) in questionHeaders" 
                :key="index" 
                :label="`${question.questionTypeName}${question.questionNumber}`"
                align="center"
              >
                <template slot-scope="scope">
                  <span class="score-value">
                    <!-- 模板直接调用实例方法，无需传 obj（已存在实例中） -->
                    {{ getScoreRate(scope.row.dimension, question.questionNumber) }}%
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top:40px;display:flex;justify-content: space-between;">
              <div style="width:785px">
                <h3>
                  班级试卷得分率
                  <el-radio-group v-model="questionType" @change="valChange">
                    <el-radio-button label="1">客观题</el-radio-button>
                    <el-radio-button label="2">主观题</el-radio-button>
                  </el-radio-group>
                </h3>
                <div style="display:flex;align-items:center;justify-content:center;flex-wrap:wrap" v-if="questionType==1">
                    <p style="padding:0 10px;margin:2px 0;" v-for="(item,index) in questionSingle.answer" :key="item.option" class="bjmark"><i :style="{ backgroundColor: echartColors[index] }"></i>{{item.option}}</p>
                </div>
                <div style="display:flex;align-items:center;justify-content:center;flex-wrap: wrap;" v-if="questionType==2">
                    <p style="padding:0 10px;margin:2px 0;" v-for="(item,index) in questionSingle.answer" :key="item.segment" class="bjmark"><i :style="{ backgroundColor: echartColors[index] }"></i>{{item.segment}}</p>
                </div>
                <div class="echarts-box" ref="bjsjdfl" style="width: 785px; height: 400px"></div>
                <div class="questionDiffcult">
                  <span>简单<i>{{jdNumber&&jdNumber.length || 0}}</i></span>
                  <span>较易<i>{{jyNumber&&jyNumber.length || 0}}</i></span>
                  <span>一般<i>{{ybNumber&&ybNumber.length || 0}}</i></span>
                  <span>较难<i>{{jnNumber&&jnNumber.length || 0}}</i></span>
                  <span>困难<i>{{knNumber&&knNumber.length || 0}}</i></span>
                </div>
              </div>
              <div style="width:400px;position:relative;top:-10px;">
                  <div style="display:flex;justify-content: space-between;align-items: center;">
                    <span style="font-size:14px;">{{questionSingle.questionTypeName}}{{questionSingle.questionNumber}}</span>
                    <p style="font-size:12px;color:#999;">
                      分值：{{questionSingle.fullScore}} 平均分：{{questionSingle.avgScore}} 最高分：{{questionSingle.highScore}}<br /> 班级得分率：{{questionSingle.rateScore}}%
                    </p>
                  </div>
                  <el-table border 
                      stripe
                      :data="questionSingle.answer"
                      height="500" >
                      <el-table-column label ="答案" prop="option">
                          <template slot-scope="scope">
                          {{questionType==1?scope.row.option:scope.row.segment}}
                        </template>
                      </el-table-column>
                      <!-- <el-table-column lable="作答人(试题分/科目分)">
                      </el-table-column> -->
                      <el-table-column label ="作答人数" prop="number">
                      </el-table-column>
                      <el-table-column label ="百分比">
                        <template slot-scope="scope">
                          {{scope.row.ration}}%
                        </template>
                      </el-table-column>
                  </el-table>
              </div>
            </div>
        </div>
        <!-- 单科结束 -->
        <div class="snippet m-top"  v-if="isSubject || !isSubject && !isSingleSubject">
          <h4>成绩分析</h4>
          <div>本班共{{schoolAllSore && schoolAllSore.myClassStats && schoolAllSore.myClassStats.studentCount || 0}}名学生参加考试，参与分析人数为{{schoolAllSore && schoolAllSore.myClassStats && schoolAllSore.myClassStats.effectiveStudentCount || 0}}人。</div>
          <div>最高分：{{schoolAllSore && schoolAllSore.classHighest && schoolAllSore.classHighest.studentName}}，{{schoolAllSore && schoolAllSore.myClassStats && schoolAllSore.myClassStats.highScore}}分，校排名{{schoolAllSore && schoolAllSore.classHighest && schoolAllSore.classHighest.schoolRank}}。</div>
          <div>班平均分：{{schoolAllSore && schoolAllSore.myClassStats && schoolAllSore.myClassStats.avgScore}}分，校排名第{{schoolAllSore && schoolAllSore.myClassStats && schoolAllSore.myClassStats.avgScoreRank}}。</div>
        </div>
        <div class="snippet m-top" v-if="!isSubject && !isSingleSubject">
          <h4>上线分析</h4>
          <div>
            本次共设置{{schoolAllSore && schoolAllSore.scoreLines && schoolAllSore.scoreLines.length}}个分数线：<span v-for="(item,index) in schoolAllSore && schoolAllSore.scoreLines && schoolAllSore.scoreLines" :key="`line-${index}`">
              {{item.onlineName}}上线分数{{item.onlineScore}}分<i v-if="index!=schoolAllSore.scoreLines.length-1">、</i>
            </span>
          </div>
          <div v-for="(item,index) in schoolAllSore && schoolAllSore.scoreLines && schoolAllSore.scoreLines" :key="`line1-${index}`">
            {{item.onlineName}}上线率：本校上线{{item.onlineNumber}}人，上线率{{item.onlineRate}}%，本班上线{{item.classOnlineNumber}}人，上线率{{item.classOnlineRate}}%；
          </div>
        </div>
        <div v-if="!isSubject && !isSingleSubject"  style="margin-top:40px;">
            <h3 ref="bjqsmfx">班级前10名分析</h3>
          <div class="snippet m-top">
            <div>标红数字表示该科为学生相对弱势学科。</div>
            <div>
              弱势学科：科目成绩击败率低于总分成绩击败率超过2%的两个科目。
            </div>
            <div>
              击败率：测验中低于目标个体成绩的人数百分比，公式为：击败率=(有效参考学生人数-目标名次)
              /（有效参考学生人数-1）。
            </div>
          </div>
          <el-table border stripe :data="schoolToptenlist">
            <!-- 姓名列 -->
            <el-table-column align="center" label="姓名">
              <template #default="scope">
                {{ scope.row.name || '未知' }}
              </template>
            </el-table-column>
            <!-- 总分(物理赋分) -->
            <el-table-column 
              label="总分(物理赋分)" 
              width="110"
              align="center"
              v-if="type === 2">
              <template #default="scope">
                {{ scope.row.endowScore }}
              </template>
            </el-table-column>
            <!-- 总分(历史赋分) -->
            <el-table-column 
              label="总分(历史赋分)" 
              width="110"
              v-if="type === 1">
              <template #default="scope">
                {{ scope.row.endowScore }}
              </template>
            </el-table-column>
            <!-- 校名次 -->
            <el-table-column align="center" label="校名次">
              <template #default="scope">
                {{ scope.row.schoolRank }}
              </template>
            </el-table-column>
            <!-- 班名次 -->
            <el-table-column align="center" label="班名次">
              <template #default="scope">
                {{ scope.row.classRank }}
              </template>
            </el-table-column>
            <!-- 总分(历史) -->
            <el-table-column 
              label="总分(历史)" 
              width="110"
              v-if="type === 1">
              <template #default="scope">
                {{ scope.row.totalScore }}
              </template>
            </el-table-column>
            <!-- 总分(物理) -->
            <el-table-column 
              label="总分(物理)" 
              width="110"
              v-if="type === 2"
              align="center">
              <template #default="scope">
                {{ scope.row.totalScore }}
              </template>
            </el-table-column>
            <!-- 总分 -->
            <el-table-column 
              label="总分" 
              v-if="type === 0">
              <template #default="scope">
                {{ scope.row.totalScore }}
              </template>
            </el-table-column>
            <!-- 各科成绩列 - 使用examSubjectName作为表头 -->
            <el-table-column 
              v-for="subject in subjectsTopline" 
              :key="subject" 
              :label="subject" 
              width="80"
              align="center">
              <template #default="scope">
                {{ getScore(scope.row, subject) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="isSubject || !isSubject && !isSingleSubject" style="margin-top:40px;">
            <h3 ref="gbpjf">各班平均分</h3>
            <div class="echarts-box" ref="gbpjfChart"></div>
            <div class="snippet m-top">
            <h4>表格分析</h4>
            <div>
              共{{schoolAllSore && schoolAllSore.classInfo && schoolAllSore.classInfo.totalClasses || 0}}个班级、{{schoolAllSore && schoolAllSore.myClassStats && schoolAllSore.myClassStats.studentCount}}名学生参与分析，
              最高平均分为{{schoolAllSore && schoolAllSore.myClassStats && schoolAllSore.myClassStats.avgScore}}分，所在班级为{{schoolAllSore && schoolAllSore.classHighest && schoolAllSore.classHighest.schoolName}}；
              全校平均分为{{schoolAllSore && schoolAllSore.mySchoolStats && schoolAllSore.mySchoolStats.avgScore}}分，排名前三的班级分别是： <span v-for="(item,index) in schoolAllSore && schoolAllSore.classInfo && schoolAllSore.classInfo.top3Classes" :key="`class-${index}`">{{item.name}}<i v-if="index!=schoolAllSore.classInfo.top3Classes.length-1">、</i></span>。
            </div>
          </div>
        </div>
        <div v-show="isSubject || !isSubject && !isSingleSubject" style="margin-top:40px;">
          <h3 ref="zffbqk">成绩分布</h3>
          <div class="echarts-box" ref="zffbChart"></div>
          <div class="snippet mini m-top">
            <span> 分数段默认为 </span>
            <el-select v-model="scorerangeNumber" placeholder="请选择" style="width:150px;" @change="changeScorerange">
                  <el-option
                    v-for="item in scorerangeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              <span> ，分数段默认上限为最高分，下限为最低分。 </span>
          </div>
          <el-table border stripe :data="allScorerangelist">
            <el-table-column align="center" prop="className" label="班级">
            </el-table-column>
            <el-table-column 
                v-for="(segment, index) in allSegments" 
                :key="segment"  
                align="center"
                :width="180"
                :label="segment" 
              >
                <el-table-column 
                  align="center" 
                  label="本段" 
                  :prop="`segments[${index}].sameScoreNumber`"  
                ></el-table-column>
                <el-table-column 
                  align="center" 
                  label="累计" 
                  :prop="`segments[${index}].totalScoreNumber`" 
                ></el-table-column>
              </el-table-column>
          </el-table>
          <div class="snippet m-top">
            <h4>表格分析</h4>
            <div>
            本次考试成绩最高分区间为
            {{getScoreSegmentStatsObj&&getScoreSegmentStatsObj.maxScoreSegment&&getScoreSegmentStatsObj.maxScoreSegment.segmentInfo}}，
            共{{getScoreSegmentStatsObj&&getScoreSegmentStatsObj.maxScoreSegment&&getScoreSegmentStatsObj.maxScoreSegment.sameScoreNumber}}人，
            占比总人数的{{getScoreSegmentStatsObj&&getScoreSegmentStatsObj.maxScoreSegment&&getScoreSegmentStatsObj.maxScoreSegment.sameScoreRate||0}}%。
            峰值出现在{{getScoreSegmentStatsObj&&getScoreSegmentStatsObj.mostScoreSegment&&getScoreSegmentStatsObj.mostScoreSegment.segmentInfo}}分区间，
            共{{getScoreSegmentStatsObj&&getScoreSegmentStatsObj.mostScoreSegment&&getScoreSegmentStatsObj.mostScoreSegment.sameScoreNumber}}人，
            占比总人数的{{getScoreSegmentStatsObj&&getScoreSegmentStatsObj.mostScoreSegment&&getScoreSegmentStatsObj.mostScoreSegment.sameScoreRate || 0}}%。
          </div>
          </div>
        </div>
        <div v-show="!isSubject && !isSingleSubject">
          <h3 ref="yxsfb">优秀生分布</h3>
          <div class="echarts-box yxsfb">
            <div ref="yxsfbChart0"></div>
            <div ref="yxsfbChart1"></div>
            <div ref="yxsfbChart2"></div>
            <div ref="yxsfbChart3"></div>
            <div ref="yxsfbChart4"></div>
            <div ref="yxsfbChart5"></div>
          </div>

          <h3 ref="gxkjhfx">各学科均衡分析</h3>
          <div class="snippet mini m-top">
            <span>
              标准Z分=（班级平均分-年级均分）/
              年级标准差；班级内标准Z分最小的科目为相对弱势科目（雷达图的凹陷处）。
            </span>
          </div>

          <div class="flex">
            <el-table border stripe style="width: 800px; height: 100%" :data="classScoreCompareList">
              <el-table-column align="center" prop="subjectName" label="科目">
              </el-table-column>
              <el-table-column align="center" prop="schoolAvg" label="学校平均分">
              </el-table-column>
              <el-table-column align="center" prop="classAvg" label="班级平均分">
              </el-table-column>
              <el-table-column align="center" prop="zscore" label="班级标准Z分">
              </el-table-column>
            </el-table>
            <div
              class="echarts-box"
              ref="gxkjhfxChart"
              style="width: 500px; height: 100%"
            ></div>
          </div>

          <div class="snippet m-top">
            <h4>表格分析</h4>
            <div>
              根据本班各科标准Z分分析，相对优势的科目是地理，相对弱势的科目是化学。
            </div>
          </div>
        </div>
      </div>
      <div class="snippet danger m-top" v-show="!isSubject && !isSingleSubject">
        <h4>划线提示</h4>
        <div>本次考试模拟划线，分数线按照各校上报人数，数据仅供参考！</div>
      </div>

      <div class="page-card m-top" v-show="!isSubject && !isSingleSubject">
        <h3 ref="sxqk">上线情况</h3>

        <el-table border stripe :data="comparisonList">
            <!-- 分数线名称列 -->
            <el-table-column align="center" label="分数线" width="105">
              <template #default="scope">
                {{ scope.row.lineName }}
              </template>
            </el-table-column>
            
            <!-- 动态生成科目列 -->
            <el-table-column 
              v-for="subject in subjectstab" 
              :key="subject" 
              :label="subject" 
              align="center"
              width="150">
              <template #default="scope">
                {{ getScoreonline(scope.row, subject) }}
              </template>
            </el-table-column>
            
            <!-- 其他固定列（如果数据中存在对应科目会显示，否则显示"-"） -->
            <el-table-column align="center" :label="totalScoreLabel" width="150">
              <template #default="scope">
                {{ getScoreonline(scope.row, '总分') }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="语文" width="150">
              <template #default="scope">
                {{ getScoreonline(scope.row, '语文') }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="数学" width="150">
              <template #default="scope">
                {{ getScoreonline(scope.row, '数学') }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="英语" width="150">
              <template #default="scope">
                {{ getScoreonline(scope.row, '英语') }}
              </template>
            </el-table-column>
          </el-table>

        <div class="snippet m-top">
          <h4>表格分析</h4>
          <div v-for="(item,index) in schoolAllSore && schoolAllSore.scoreLines && schoolAllSore.scoreLines" :key="`表格分析-${index}`"> 
            {{item.onlineName}}分数线{{item.onlineScore}}分， 
            联考上线人数 {{item.examOnlineNumber}} 人，比例 {{item.examOnlineRate}}%； 本校上线
            {{item.onlineNumber}} 人 ，比例 {{item.onlineRate}}%；本班上线 {{item.classOnlineNumber}}人，比例{{item.classOnlineRate}}% ；</div>
        </div>

        <h3 ref="gxksxfx">
          各学科上线分析
          <el-radio-group v-model="gksxfxTab" @change="gksxfxchange">
            <el-radio-button v-for="(item,index) in onlineList" :key="'各学科上线分析'+index" :label="item.onlinename">{{item.onlinename}}</el-radio-button>
          </el-radio-group>
        </h3>

        <div class="snippet m-top">
          <span>
            本次考试总共设置了三个分数线，将对每个科目的单上线人数、双上线人数、命中率、贡献率、单科过线率等指标进行分析。
            单上线人数：单科上线的学生人数；双上线人数：单科上线且总分也上线的学生人数。
            命中率=（双上线人数/单科上线人数）×100%；贡献率=（双上线人数/总分上线人数）×100%
            ；单科过线率：单上线人数 / 该科参试人数 。
          </span>
        </div>

        <div class="flex">
          <el-table 
                :data="subjectAnalyseList" 
                border 
                stripe 
                style="width: 100%; margin-top: 20px;"
                v-if="subjectAnalyseList.length"
              >
                <!-- 科目列 -->
                <el-table-column 
                  align="center" 
                  prop="examSubjectName" 
                  label="科目"
                ></el-table-column>
                <!-- 分数线列 -->
                <el-table-column 
                  align="center" 
                  prop="lineScore" 
                  label="分数线"
                ></el-table-column>
                <!-- 单上线人数列 -->
                <el-table-column 
                  align="center" 
                  prop="singleLineNum" 
                  label="单上线人数"
                ></el-table-column>
                <!-- 双上线人数列 -->
                <el-table-column 
                  align="center" 
                  prop="doubleLineNum" 
                  label="双上线人数"
                ></el-table-column>
                <!-- 命中率(%)列 -->
                <el-table-column 
                  align="center" 
                  prop="hitRate" 
                  label="命中率(%)"
                ></el-table-column>
                <!-- 贡献率(%)列 -->
                <el-table-column 
                  align="center" 
                  prop="contributionRate" 
                  label="贡献率(%)"
                ></el-table-column>
                <!-- 单科过线率(%)列 -->
                <el-table-column 
                  align="center" 
                  prop="onlineRate" 
                  label="单科过线率(%)"
                ></el-table-column>
              </el-table>
          <div
            class="echarts-box"
            ref="gksxfxChart"
            style="width: 500px; height: 100%"
          ></div>
        </div>

        <div class="snippet m-top">
          <h4>表格分析</h4>
          <div v-for="(item,index) in schoolAllSore && schoolAllSore.scoreLines && schoolAllSore.scoreLines" :key="`表格分析-${index}`"> {{item.onlineName}}上线分数{{item.onlineScore}}分， 上线人数 {{item.onlineNumber}}人，占学生人数的 {{item.examOnlineRate || 0}}%</div>
        </div>

        <h3 ref="ljsfx">
          临界生分析
          <el-radio-group v-model="ljsfxTab" @change="changeonline">
            <el-radio-button v-for="(item,index) in onlineList" :key="'临界'+index" :label="item.onlinename">{{item.onlinename}}</el-radio-button>
          </el-radio-group>
         </h3>

        <div class="snippet m-top">
          <div>
            红色分数表示科目为学生相对弱势学科，需要重点关注该科目多加练习。
          </div>
          <div>
            蓝色分数表示科目为学生相对优势学科，需要保持成绩，并合理分配时间给其弱势学科中。
          </div>
          <div>弱势学科：科目成绩贡献值低于-10的科目。</div>
          <div>优势学科：科目成绩贡献值高于10的科目。</div>
        </div>
        <!-- {{students}} -->
        <el-table 
            :data="students" 
            border 
            stripe 
            class="score-table"
            v-loading="ljsLoading">
            <!-- 固定列：考号和姓名 -->
            <el-table-column align="center" prop="admissionNo" label="考号" width="120" fixed>
            </el-table-column>
            <el-table-column align="center" prop="studentName" label="姓名" width="120" fixed>
            </el-table-column>
            <!-- 动态科目列 -->
            <el-table-column 
                v-for="subject in subjects" 
                :key="subject.examSubjectId"
                align="center" 
                :label="getSubjectLabel(subject)"
                class-name="subject-header">
                
                <el-table-column align="center" label="分数" width="100">
                    <template slot-scope="scope">
                        <span>{{ getStudentScore(scope.row, subject.examSubjectId, 'studentScore') }}</span>
                    </template>
                </el-table-column>
                
                <el-table-column align="center" label="贡献值" width="100">
                    <template slot-scope="scope">
                        <span :class="getContributionClass(scope.row, subject.examSubjectId)">
                            {{ getStudentScore(scope.row, subject.examSubjectId, 'contribution') }}
                        </span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <!-- <el-table border stripe>
          <el-table-column align="center" prop="date" label="考号">
          </el-table-column>
          <el-table-column align="center" prop="date" label="姓名">
          </el-table-column>
          <el-table-column align="center" label="总分(历史)(赋分)(123.5)">
            <el-table-column align="center" prop="date" label="分数">
            </el-table-column>
            <el-table-column align="center" prop="date" label="贡献值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="语文(123.5)">
            <el-table-column align="center" prop="date" label="分数">
            </el-table-column>
            <el-table-column align="center" prop="date" label="贡献值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="数学(123.5)">
            <el-table-column align="center" prop="date" label="分数">
            </el-table-column>
            <el-table-column align="center" prop="date" label="贡献值">
            </el-table-column>
          </el-table-column>
        </el-table> -->
      </div>
    </div>
    <div class="roll">
      <el-dropdown @command="handleCommand">
        <div>
          <i class="el-icon-more"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item disabled>成绩分析</el-dropdown-item>
          <el-dropdown-item command="bjqsmfx">班级前10名分析</el-dropdown-item>
          <el-dropdown-item command="gbpjf">各班平均分</el-dropdown-item>
          <el-dropdown-item command="zffbqk">总分分布情况</el-dropdown-item>
          <el-dropdown-item command="yxsfb">优秀生分布</el-dropdown-item>
          <el-dropdown-item command="gxkjhfx">各学科均衡分析</el-dropdown-item>
          <el-dropdown-item divided disabled>上线分析</el-dropdown-item>
          <el-dropdown-item command="sxqk">上线情况</el-dropdown-item>
          <el-dropdown-item command="gxksxfx">各学科上线分析</el-dropdown-item>
          <el-dropdown-item command="ljsfx">临界生分析</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="roll roll-top" @click="backTop">
      <div>
        <i class="el-icon-top"></i>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { Navbar } from "@/layout/components";
import { 
  subjectGetlist,
  allScorelist,
  allScorerange,
  schoolTopten,
  schoolScoreCompare,
  classDistribution,
  subjectAnalyse,
  classScoreCompare,
  comparison,
  classQuestionScoreRate,
  onlinePeopleCompare,
  questionScoreRate,
  getQuestionStats,
  studentsComplete,
  getScoreSegmentStats
 } from "@/api/cjfx/cjfx"
export default {
  name: "Cjfx_bjfxgb",
  components: {
    Navbar,
  },
  data() {
    return {
      xmxx:{},
      activeComponents: "",
      gksxfxTab: "1",
      ljsfxTab: "1",
      zffbChart: null,
      yxsfbChart0: null,
      yxsfbChart1: null,
      yxsfbChart2: null,
      yxsfbChart3: null,
      yxsfbChart4: null,
      yxsfbChart5: null,
      gxkjhfxChart: null,
      gksxfxChart: null,
      direction:[
        {
          name:'物理方向',
          id:2
        },
        {
          name:'历史方向',
          id:1
        }
      ],
      type:2,
      kslb:[],
      schoolAllSore:{},
      fftype:'',
      subjectId:'',
      schoolToptenlist:[],
      subjectsTopline:[],
      scorerangeList:[{id:10,name:'10分/段'},{id:20,name:'20分/段'},{id:50,name:'50分/段'}],
      allScorerangelist:[],
      allSegments: [],
      scorerangeNumber:10,
      classDistributionList:[],
      comparisonList:[],
      subjectstab:[],
      subjectAnalyseList:[],
      onlineList:[],
      isSingleSubject:false,
      isSubject:false,
      schoolAllSoreList:[],
      mcfddbChart: null,
      tableDatarate:[],
      firstDimension:[],
      questionHeaders:[],
      questionType:'1',
      bjsjdfl:null,
      classScoreCompareList:[],
      jdNumber:'',
      jyNumber:'',
      ybNumber:'',
      jnNumber:'',
      knNumber:'',
      questionSingle:{},
      getQuestionStatsObj:{},
      studentsCompleteList:[],
      getScoreSegmentStatsObj:{},
      loading: false,
      scoreLineTypeName: '',
      students: [],
      subjects: [],
      ljsLoading:false,
      ljsList:[],
      difficultyColors:{
        '简单': '#52c41a',    // 绿色（最简单）
        '较易': '#a0d995',    // 浅绿色
        '中等': '#faad14',    // 黄色
        '较难': '#fa8c16',    // 橙色
        '困难': '#f5222d'     // 红色（最难）
      }
    }
  },
  computed: {
    // 计算属性处理表头显示逻辑
    totalScoreLabel() {
      // 将路由参数转为数字类型再判断
      const type = Number(this.$route.query.type);
      if (type == 2) {
        return '总分(物理赋分)';
      } else if (type == 1) {
        return '总分(历史赋分)';
      } else {
        return '总分';
      }
    }
  },
  mounted() {
    this.xmxx = JSON.parse(sessionStorage.getItem('analysisXmxx'))
    //获取学科
    this.subjectlisttap(this.xmxx.id)
    //校级总览
    this.fftype =this.type==2?1:0
    this.activeComponents = this.type==2?'总分(物理赋分)':this.type==1?'总分(历史赋分)':'总分'
    this.allScorelisttap(this.xmxx.id,this.fftype)
    //班级前10名
    this.schooltoptentap(this.xmxx.id,this.fftype)
    // 各班平均分
    this.gbpjfChart = echarts.init(this.$refs.gbpjfChart);
    this.getGbpjf(this.xmxx.id,this.fftype);
    this.onlinePeopleCompareTap(this.xmxx.id)
    // 总分分布
    this.zffbChart = echarts.init(this.$refs.zffbChart);
    this.getZffb(this.xmxx.id,this.fftype);
    this.getScoreSegmentStatsTap(this.xmxx.id)
    // 优秀生分布
    this.classDistributionTab(this.xmxx.id)

    // 各学科均衡分析
    this.gxkjhfxChart = echarts.init(this.$refs.gxkjhfxChart);
    this.getGxkjhfx();

    //上线情况
    this.comparisonTap(this.xmxx.id)

    // 各科上线分析
    this.gksxfxChart = echarts.init(this.$refs.gksxfxChart);
    this.getGksxfx(this.xmxx.id);
  //试题得分率
    this.mcfddbChart = echarts.init(this.$refs.mcfddbChart);
    this.questionScoreRateTab()

    //班级试卷得分率
    this.bjsjdfl = echarts.init(this.$refs.bjsjdfl);

    //临界生
    this.studentsCompleteTap(this.xmxx.id)
  },
  methods: {
    shaixuanFx(val){
      this.type=val
       this.activeComponents = this.type==2?'总分(物理赋分)':this.type==1?'总分(历史赋分)':'总分'
       this.allScorelisttap(this.xmxx.id,this.fftype)
      //班级前10名
      this.schooltoptentap(this.xmxx.id,this.fftype)
      // 各班平均分
      this.gbpjfChart = echarts.init(this.$refs.gbpjfChart);
      this.getGbpjf(this.xmxx.id,this.fftype);
      this.onlinePeopleCompareTap(this.xmxx.id)
      // 总分分布
      this.zffbChart = echarts.init(this.$refs.zffbChart);
      this.getZffb(this.xmxx.id,this.fftype);
      // 优秀生分布
      this.classDistributionTab(this.xmxx.id)
      //上线情况
      this.comparisonTap(this.xmxx.id)
      this.getGksxfx(this.xmxx.id);
    },
    //上线人数对比
    async onlinePeopleCompareTap(id){
      let obj={
        examId:id,
        subjectGroup:this.type,
        isEndow:this.fftype
      }
      // console.log("请求参数:", obj);
      const res = await onlinePeopleCompare(obj)
      if(res.code==200){
        this.yshjdate = res.data
        // console.info(res.data,'dddasdfres.data')
        // this.onlineList = res.data.map(item => Object.keys(item)[0]);
        this.onlineList = res.data.map((item, index) => {
          const line = Object.keys(item)[0]; // 分数线类型（如'特控(一本)线'）
          const lineArray = item[line]; // 分数线对应的数组
          const firstItemInArray = lineArray[0]; // 数组第一个元素
          const firstClassKey = Object.keys(firstItemInArray)[0]; // 第一个班级key
          const peopleNum = firstItemInArray[firstClassKey][0].peopleNum;
          return {
            label: `${line}(${peopleNum})`, // 显示在表格表头的文本
            onlinename: line // 与表格数据 row 匹配的属性键
          };
        });
        if (this.onlineList.length > 0) {
          this.mzlgxlTab = this.onlineList[0].onlinename;
          this.sxjfdbTab = this.onlineList[0].onlinename;
          this.ljsfxTab = this.onlineList[0].onlinename;
          this.gksxfxTab = this.onlineList[0].onlinename;
        }
        //临界生分析
        const findData = (arr, key) => {
          // 遍历数组中的每个对象
          for (const item of arr) {
            // 检查当前对象是否包含目标键
            if (item.hasOwnProperty(key)) {
              // 返回找到的对应值
              return item[key];
            }
          }
          // 如果没有找到，返回null或空数组
          return null;
        };
        // 执行查找
        const result = findData(res.data, this.ljsfxTab).slice(1);
      }else{
        this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    //获取学科列表
    subjectlisttap(id){
        subjectGetlist({ examId: id,subjectGroup:this.type }).then(
          (response) => {
            if(response.code==200){
              this.kslb = response.data;
            }else{
              this.$message({
                message: res.msg,
                type: 'warning'
              });
            }
            
          }
        );
    },
    //班级总览
    allScorelisttap(id,fftype){
      let obj={
        examId: id,
        subjectGroup:this.type,
        endowFlag:fftype,
        classId:this.$route.query.classId,
        subjectId:this.subjectId?this.subjectId:undefined
      }
        allScorelist(obj).then(
          (response) => {
            if(response.code==200){
              this.schoolAllSore = response.data?response.data:{}
              let exam= {statusName:'联考', ...response.data.examStats}
              let school = {statusName:'本校', ...response.data.mySchoolStats}
              let ClassName = {statusName:'本班', ...response.data.myClassStats}
              this.schoolAllSoreList = [exam, school, ClassName];
              // console.info(this.schoolAllSoreList,'schoolAllSoreList')
            }else{
              this.$message({
                message: res.msg,
                type: 'warning'
              });
            }
          }
        );
    },
    handleClick(tab, event) {
      this.subjectId=''
      this.fftype = tab.name.includes('赋分')?1:0
      this.scoreType= tab.name.includes('总分')?2:1
      this.isSubject = !tab.name.includes('总分')&&tab.name.includes('赋分')
      this.isSingleSubject = !tab.name.includes('总分')&&!tab.name.includes('赋分')
      // console.info(this.isSubject,'this.isSingleSubject')
      if(!tab.name.includes('总分')&&tab.name.includes('赋分')){ // 单科赋分
        this.subjectTitle = tab.name
        let subjectObj = this.kslb.filter(item=>{return item.name==tab.name})
        this.subjectId = subjectObj[0].id
        this.getZffb(this.xmxx.id)
        this.allScorelisttap(this.xmxx.id,this.fftype)
        // 各班平均分
        this.gbpjfChart = echarts.init(this.$refs.gbpjfChart);
        this.getGbpjf(this.xmxx.id,this.fftype);
        this.onlinePeopleCompareTap(this.xmxx.id)
        // 总分分布
        this.zffbChart = echarts.init(this.$refs.zffbChart);
        this.getZffb(this.xmxx.id,this.fftype);
      }else if(!tab.name.includes('总分')&&!tab.name.includes('赋分')){  //单科
      let subjectObj = this.kslb.filter(item=>{return item.name==tab.name})
        this.subjectId = subjectObj[0].id
        this.getZffb(this.xmxx.id)
        // this.allScorelisttap(this.xmxx.id,this.fftype)
        this.questionScoreRateTab()
        this.bjsjdfltap()
        //单科分析统计
        this.getQuestionStatsTab()
      }else{//总分
        this.allScorelisttap(this.xmxx.id,this.fftype)
        //班级前10名
        this.schooltoptentap(this.xmxx.id,this.fftype)
        // 各班平均分
        this.gbpjfChart = echarts.init(this.$refs.gbpjfChart);
        this.getGbpjf(this.xmxx.id,this.fftype);
        this.onlinePeopleCompareTap(this.xmxx.id)
        // 总分分布
        this.zffbChart = echarts.init(this.$refs.zffbChart);
        this.getZffb(this.xmxx.id,this.fftype);
        // 优秀生分布
        this.classDistributionTab(this.xmxx.id)
        //上线情况
        this.comparisonTap(this.xmxx.id)
        this.getGksxfx(this.xmxx.id);
      }
      this.activeComponents = tab.name;
    },
    //班级前10名
    getScore(student, subjectName) {
      const scoreItem = student.scores.find(
        item => item.examSubjectName === subjectName
      );
      return scoreItem ? scoreItem.score : '-';
    },
    async schooltoptentap(id,fftype){
      let obj={
        examId: id,
        subjectGroup:this.type,
        endowFlag:fftype,
        classId:this.$route.query.classId,
        subjectId:this.subjectId?this.subjectId:undefined
      }
      const res = await schoolTopten(obj)
      if(res.code==200){
         // 假设 res.data 已赋值给 this.schoolToptenlist
        this.schoolToptenlist = res.data;
        // 核心：将 scores 中的 studentName 复制到外层 name
        this.schoolToptenlist.forEach(student => {
          // 取 scores 数组第一个元素的 studentName（若数组为空则设为''）
          if (student.scores && student.scores.length > 0) {
            student.name = student.scores[0].studentName;
          } else {
            student.name = ''; // 处理 scores 为空的极端情况
          }
        });
        // 后续提取科目表头的逻辑（保持不变）
        const subjectSet = new Set();
        this.schoolToptenlist.forEach(student => {
          student.scores.forEach(score => {
            // 注意：原代码判断的是 score.score，若字段名不同需调整（如 score.studentName）
            if (score.studentName !== null) { // 按实际字段调整判断条件
              subjectSet.add(score.examSubjectName);
            }
          });
        });
        this.subjectsTopline = Array.from(subjectSet);
      }else{
        this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    async getGbpjf(id,fftype) {
      let obj={
        examId: id,
        subjectGroup:this.type,
        endowFlag:fftype,
        classId:this.$route.query.classId,
        subjectId:this.subjectId?this.subjectId:undefined
      }
      const res = await schoolScoreCompare(obj)
      if(res.code==200){
          const filteredArray = res.data.slice(2);
        // 步骤2：平铺嵌套结构（循环提取每个对象中的数组，合并为一维队列）
        let arrayList = filteredArray.flatMap(item => Object.values(item)[0]);
        let className = arrayList.map(item=>{return item.className})
        let avglist = arrayList.map(item=>{return item.avgScore})
        // console.info(avglist,'avglist')
        this.gbpjfChart.setOption({
            xAxis: {
              type: "category",
              data: className,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: avglist,
                type: "bar",
                markLine: {
                  data: [{ type: "average", name: "平均分" ,lineStyle: {
                    color: '#ff4500',
                    type: 'dashed'
                  }}],
                  label: {
                    position: 'end', // 标签显示在线的末端
                     formatter: function(params) {
                        // params 包含标记线的所有信息
                        return `${params.name}: ${params.value.toFixed(2)}`;
                      }
                  }
                },
              },
            ],
          });
      }else{
        this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    //切换分数段
    changeScorerange(val){
        this.scorerangeNumber=val
        this.getZffb(this.xmxx.id)
    },
    async getZffb(id) {
      let obj={
        examId:id,
        endowFlag:0,
        subjectGroup:this.$route.query.type,
        segmentInterval:this.scorerangeNumber,
        scoreType:this.scoreType,
        subjectId:this.subjectId?this.subjectId:undefined,
        classId:this.$route.query.classId,
      }
      // 注意：await 和 .then() 不要同时使用，会导致逻辑混乱
        const res = await allScorerange(obj); // 直接使用await获取结果
        if (res.code === 200) {
          const segmentsSet = new Set();
          // 1. 转换数据并同时赋值给allScorerangelist（关键修复）
          this.allScorerangelist = res.data.map(item => {
            const className = Object.keys(item)[0];
            const segments = item[className];
            segments.forEach(seg => segmentsSet.add(seg.segmentInfo));
            return {
              className,
              segments
            };
          });
          // 2. 同时将转换后的数据赋值给tableData（如果需要）
          this.tableData = this.allScorerangelist;
          // 3. 转换分数段集合为数组
          this.allSegments = Array.from(segmentsSet);
          // 调试：检查allScorerangelist是否有数据
          // console.log('allScorerangelist长度:', this.allScorerangelist.length);
          // console.log('allScorerangelist内容:', this.allScorerangelist);
          // 4. 现在循环应该能执行了（因为allScorerangelist已经有数据）
          this.allScorerangelist.forEach((row, index) => {
            const sortedSegments = [];
            this.allSegments.forEach(segInfo => {
              // 容错处理：确保row.segments是数组
              const rowSegments = Array.isArray(row.segments) ? row.segments : [];
              // 优化匹配逻辑（处理格式差异）
              const found = rowSegments.find(s => {
                if (!s || !s.segmentInfo) return false;
                // 去除空格后比较
                return s.segmentInfo.trim() === segInfo.trim();
              });
              sortedSegments.push(found || {
                segmentInfo: segInfo,
                sameScoreNumber: 0,
                totalScoreNumber: 0
              });
            });
            row.segments = sortedSegments;
          });
        }
        // console.info(this.allScorerangelist,'this.allScorerangelist')
        let lkline=this.allScorerangelist[0].segments.map(item=>item.sameScoreNumber)
        let schoolline = this.allScorerangelist[1].segments.map(item=>item.sameScoreNumber)
      this.zffbChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["统考全体", "本校"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.allSegments,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "统考全体",
            type: "line",
            stack: "Total",
            data: lkline,
          },
          {
            name: "本校",
            type: "line",
            stack: "Total",
            data:schoolline,
          },
        ],
      });
    },
  // 格式化表头文字（top50 -> 前50名）
    formatLabel(key) {
      const num = key.replace('top', '');
      return `前${num}名`;
    },
    async getScoreSegmentStatsTap(id){
      let obj={
        examId:id,
        endowFlag:0,
        subjectGroup:this.$route.query.type,
        segmentInterval:this.scorerangeNumber,
        scoreType:this.scoreType,
        subjectId:this.subjectId?this.subjectId:undefined,
        classId:this.$route.query.classId
      }
      const res = await getScoreSegmentStats(obj)
      if(res.code==200){
        this.getScoreSegmentStatsObj = res.data
      }else{
        this.$message({
          type:"warning",
          message:res.msg
        })
      }
    },  
    //优秀分布生
    async classDistributionTab(id){
      let obj={
        examId:id,
        endowFlag:this.fftype,
        subjectGroup:this.$route.query.type,
        segmentInterval:this.scorerangeNumber,
        scoreType:this.scoreType,
        subjectId:this.subjectId?this.subjectId:undefined,
        classId:this.$route.query.classId,
      }
      const res = await classDistribution(obj)
      if(res.code==200){
        let array = Object.entries(res.data).map(([key, value]) => {
          // 提取数字部分并转换为中文描述
          const number = key.replace('top', '');
          return {
            top: `前${number}名`,
            ...value // 展开原对象的属性（classStuCount、schoolStuCount、ratio）
          };
        });
        let colorArray=['#5470C6',"#91CC75","#FAC858","#EE6666","#73C0DE","#3BA272"]
        const mergedArray = array.map((item, index) => {
            // 取对应索引的颜色，如果颜色数组长度不足则循环使用
            const color = colorArray[index % colorArray.length];
            return {
                ...item,  // 保留原对象所有属性
                color     // 添加颜色属性
            };
        });
        mergedArray.forEach((v, i) => {
          this["yxsfbChart" + i] = echarts.init(this.$refs["yxsfbChart" + i]);
          this.getYxsfb(v, i);
        });
      }else{
        this.$message({
          type:"warning",
          message:res.msg
        })
      }
    },
    // 上线情况
    getScoreonline(row, subject) {
      const value = row[subject];
      // console.log(`科目: ${subject}, 存在: ${row.hasOwnProperty(subject)}, 值: ${value}`);
      return row.hasOwnProperty(subject) ? value : '-';
    },
    async comparisonTap(id){
      let obj={examId: id,subjectGroup:this.type,isEndow:this.fftype,classId:this.$route.query.classId,}
      const res= await comparison(obj)
      if(res.code==200){
        // 提取所有科目名称
        const subjectSet = new Set();
        // 处理原始数据为表格需要的格式
        this.comparisonList = res.data.map(item => {
          const lineName = Object.keys(item)[0];
          let scores = item[lineName];
          // 先按examSubjectId对scores数组进行排序
          scores = scores.sort((a, b) => {
            // 按examSubjectId升序排列，确保0也会被正确排序
            return a.subjectId - b.subjectId;
          });
          // 创建行数据对象
          const rowData = { lineName: lineName };
          
          // 处理排序后的科目
          scores.forEach(score => {
            subjectSet.add(score.examSubjectName);
            rowData[score.examSubjectName] = score.lineScore;
          });
          return rowData;
        });
          this.subjectstab = Array.from(subjectSet); 
      }else{
        this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    getYxsfb(item, index) {
      this["yxsfbChart" + index].setOption({
        series: {
          name: item.top,
          type: "pie",
          radius: [75, 95],
          itemStyle: {
            normal: {
              color: item.color,
              shadowColor: item.color,
              shadowBlur: 0,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value:parseInt(item.ratio*100),
              label: {
                normal: {
                  formatter: function (params) {
                    return (
                      "{text1|" +
                      item.top +
                      "}\n{text2|" +
                      "本校"+item.schoolStuCount +"人"+"本班"+item.classStuCount+'人'+
                      "}\n占比" +
                      item.ratio +
                      "%"
                    );
                  },
                  rich: {
                    text1: {
                      fontSize: "14",
                      color: "#333333",
                      fontWeight: "normal",
                    },
                    text2: {
                      fontSize: "14",
                      color: "#333333",
                      fontWeight: "normal",
                      padding: [10, 0],
                    },
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                    color: item.color,
                  },
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#E6EBF8",
                },
                emphasis: {
                  color: "#E6EBF8",
                },
              },
            },
          ],
        },
      });
    },

    async getGxkjhfx() {
      let obj={
        examId: this.xmxx.id,
        subjectId: this.subjectId || undefined, // 简化写法
        classId:this.$route.query.classId,
        endowFlag:this.fftype
      }
      const res = await classScoreCompare(obj)
      if(res.code==200){
        this.classScoreCompareList = res.data
        let indicator = res.data.map(item=>{return {name:item.subjectName}})
        let dataVal = res.data.map(item=>{return item.zscore})
        this.gxkjhfxChart.setOption({
          legend: {
            data: ["Z分数"],
            left: 20,
          },
          radar: {
            // shape: 'circle',
            indicator: indicator,
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: dataVal,
                  name: "Z分数",
                },
              ],
            },
          ],
        });
      }else{

      }
    },
    //各科上线分析
    gksxfxchange(val){
      this.gksxfxTab = val
      this.getGksxfx(this.xmxx.id)
    },
    async getGksxfx(id) {
      let obj={
        examId:id,
        subjectGroup:this.type,
        isEndow:this.fftype
      }
      const res = await subjectAnalyse(obj)
      if(res.code==200){
        const filteredData = res.data.find(item => {
          // 检查当前对象的key是否包含目标type（因每个对象只有一个key，直接取keys判断）
          return Object.keys(item).includes(this.gksxfxTab);
        });
        // 若找到，提取type对应的值（即学校数组）；若未找到，返回空数组
        const result = filteredData ? filteredData[this.gksxfxTab] : [];
        // 原始数据是数组，每个元素是{ "学校名": [科目数组] }，取第一个元素的value
        const schoolDataArray = result.length 
          ? Object.values(result[0])[0] || [] 
          : [];

        // 2. 处理数据格式（补充计算字段：单科过线率%）
        this.subjectAnalyseList = schoolDataArray.map(item => ({
          examSubjectName: item.examSubjectName, // 科目名
          lineScore: item.lineScore, // 分数线
          singleLineNum: item.singleLineNum ?? 0, // 单上线人数（处理null）
          doubleLineNum: item.doubleLineNum ?? 0, // 双上线人数（处理null）
          // 命中率：保留2位小数并转百分比（原始数据是小数，如0.6061→60.61%）
          hitRate: item.hitRate !== null ? item.hitRate : "-",
          // 贡献率：同上
          contributionRate: item.contributionRate !== null ? item.contributionRate: "-",
          // 单科过线率：(单上线人数/总人数)×100%，保留2位小数
          onlineRate:item.onlineRate?item.onlineRate:"-"
        }));
        let xaira = this.subjectAnalyseList.map(item=>{return {name:item.examSubjectName}})
        let mzl = this.subjectAnalyseList.map(item=>{return item.hitRate})
        let gxl = this.subjectAnalyseList.map(item=>{return item.contributionRate})
        // console.info(xaira,'xaira')
        this.gksxfxChart.setOption({
          legend: {
            data: ["命中率M1", "贡献率M2"],
            left: 20,
          },
          radar: {
            indicator:xaira,
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: mzl,
                  name: "命中率M1",
                },
                {
                  value: gxl,
                  name: "贡献率M2",
                },
              ],
            },
          ],
        });
      }else{
        this.$message({
          type:"warning",
          message:res.msg
        })
      }
    },
    //试题得分率
    // 根据维度和题号获取对应的分数
    async questionScoreRateTab() {
      try {
        // 1. 准备请求参数
        const reqParams = {
          examId: this.xmxx.id,
          subjectId: this.subjectId || undefined, // 简化写法
          classId:this.$route.query.classId
        };

        // 2. 发起接口请求
        const res = await questionScoreRate(reqParams);

        // 3. 处理成功响应
        if (res.code === 200) {
          // 3.1 存储接口返回的完整数据（供getScoreRate后续查询）
          this.scoreData = res.data;
          // 3.2 生成维度数据（左侧第一列：学校、联考等）
          this.tableDatarate = Object.keys(res.data).map(key => ({
            dimension: key
          }));
          // 3.3 生成表头数据（题型+题号：单选1、单选2等）
          const firstDimension = Object.keys(res.data)[0];
          this.questionHeaders = firstDimension ? res.data[firstDimension] : [];
          // let obj={
          //   '学校':[{
          //     "rateScore": 0.88,
          //     "questionTypeName": "单选题",
          //     "questionNumber": "1",
          //     "answer": "[{\"number\": 7, \"option\": \"留白\", \"ration\": 0.0}, {\"number\": 142, \"option\": \"B\", \"ration\": 0.09}, {\"number\": 18, \"option\": \"C\", \"ration\": 0.01}, {\"number\": 30, \"option\": \"D\", \"ration\": 0.02}]",
          //   }],
          //   '联考':[{
          //     "rateScore": 0.88,
          //     "questionTypeName": "单选题",
          //     "questionNumber": "1",
          //     "answer": "[{\"number\": 7, \"option\": \"留白\", \"ration\": 0.0}, {\"number\": 142, \"option\": \"B\", \"ration\": 0.09}, {\"number\": 18, \"option\": \"C\", \"ration\": 0.01}, {\"number\": 30, \"option\": \"D\", \"ration\": 0.02}]",
          //   }]
          // }
          // 步骤1：解析数据（先收集所有维度的原始数据，不急于截断）
          let categories = [];
          const seriesData = {};
          // 临时数组：存储每个维度的原始数据长度（用于后续找最短长度）
          const dataLengths = [];

          // 遍历所有维度（学校、联考等），收集数据和长度
          Object.keys(res.data).forEach(dimension => {
            // 初始化该维度的数据数组
            seriesData[dimension] = [];
            // 遍历该维度下的题目数据
            res.data[dimension].forEach(item => {
              const category = `${item.questionTypeName}${item.questionNumber}`;
              if (!categories.includes(category)) {
                categories.push(category);
              }
              // 存储数据（先不截断）
              seriesData[dimension].push(Number(item.rateScore) || 0); // 加类型转换，避免非数值错误
            });
            // 记录当前维度的数据长度
            dataLengths.push(seriesData[dimension].length);
          });

          // 步骤2：找到所有维度中最短的数据长度（核心：以此为基准截断）
          const minLength = dataLengths.length > 0 ? Math.min(...dataLengths) : 0;
          // 步骤3：截断所有维度的数据——只保留前 minLength 个元素，删除末尾多余数据
          Object.keys(seriesData).forEach(dimension => {
            if (seriesData[dimension].length > minLength) {
              // 截断数组：保留索引 0 到 minLength-1 的元素，删除末尾多余部分
              seriesData[dimension] = seriesData[dimension].slice(0, minLength);
              console.log(`维度[${dimension}]数据过长，已截断为${minLength}个元素`);
            }
          });
          // 步骤4：同步截断 x轴 categories（若 categories 比 minLength 长，也需截断）
          // （因为 categories 是从第一个维度提取的，可能比其他维度长）
          if (categories.length > minLength) {
            categories = categories.slice(0, minLength);
          }
          // 后续生成 series 配置（不变）
          const series = Object.keys(res.data).map(dimension => ({
            name: dimension,
            data: seriesData[dimension], // 已截断为统一长度
            type: 'line',
            // ... 其他样式配置 ...
          }));
          // console.info(series,'series')
          // 步骤3：设置图表配置并渲染
          this.mcfddbChart.setOption({
            tooltip: {
              trigger: "axis",
              // 自定义tooltip显示内容（包含题目类型和数值）
              formatter: (params) => {
                const category = params[0].name; // 如"单选题1"
                let html = `<div>${category}</div>`;
                params.forEach(item => {
                  html += `<div>${item.seriesName}：${item.value}</div>`;
                });
                return html;
              }
            },
            legend: {
              data: Object.keys(res.data) // 图例使用obj的键：['学校', '联考']
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: categories, // x轴数据：['单选题1']（可自动扩展多题）
            },
            yAxis: {
              type: "value",
              // 设置y轴范围（根据rateScore特性，0-1更合理）
              min: 0,
              max: 1,
              // 格式化显示为百分比
              axisLabel: {
                formatter: '{value}%'
              }
            },
            series: series // 使用步骤2生成的series配置
          });
        } else {
          this.$message.warning(res.msg);
        }
      } catch (error) {
        // 捕获网络错误等异常
        console.error("请求/处理失败详情:", error); 
        this.$message.error("数据请求失败，请重试");
      }
    },
    valChange(val){
        this.questionType = val
        this.bjsjdfltap()
    },
    
    //班级试卷得分率
    lightenColor(hex, lightness) {
      // 解析 hex 颜色（如 #52c41a → r=82, g=196, b=26）
      const r = parseInt(hex.slice(1, 3), 16);
      const g = parseInt(hex.slice(3, 5), 16);
      const b = parseInt(hex.slice(5, 7), 16);

      // 将 RGB 转为 HSL（便于调整亮度）
      const [h, s, l] = this.rgbToHsl(r, g, b);
      // 计算新亮度（原亮度 + 提亮值，不超过 100）
      const newL = Math.min(l + lightness, 100);
      // 将 HSL 转回 hex
      return this.hslToHex(h, s, newL);
    },

    // 辅助函数：RGB 转 HSL（用于颜色处理）
    rgbToHsl(r, g, b) {
      r /= 255; g /= 255; b /= 255;
      const max = Math.max(r, g, b);
      const min = Math.min(r, g, b);
      let h, s, l = (max + min) / 2;

      if (max === min) {
        h = s = 0; // 灰色
      } else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
          case r: h = (g - b) / d + (g < b ? 6 : 0); break;
          case g: h = (b - r) / d + 2; break;
          case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
      }
      return [h * 360, s * 100, l * 100];
    },

    // 辅助函数：HSL 转 hex（用于颜色处理）
    hslToHex(h, s, l) {
      h /= 360; s /= 100; l /= 100;
      let r, g, b;

      if (s === 0) {
        r = g = b = l; // 灰色
      } else {
        const hue2rgb = (p, q, t) => {
          if (t < 0) t += 1;
          if (t > 1) t -= 1;
          if (t < 1/6) return p + (q - p) * 6 * t;
          if (t < 1/2) return q;
          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
          return p;
        };
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        const p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
      }
      const toHex = x => {
        const hex = Math.round(x * 255).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
      };
      return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
    },
    async bjsjdfltap(){
      this.questionSingle={}
      const reqParams = {
          examId: this.xmxx.id,
          examSubjectId: this.subjectId || undefined, // 简化写法
          classId:this.$route.query.classId,
          questionType:this.questionType || undefined
      };
      const res=await classQuestionScoreRate(reqParams)
      if(res.code==200){
          this.jdNumber = res.data.filter(item=> item.difficultyRemark=='简单')
          this.jyNumber = res.data.filter(item=> item.difficultyRemark=='较易')
          this.ybNumber = res.data.filter(item=> item.difficultyRemark=='一般')
          this.jnNumber = res.data.filter(item=> item.difficultyRemark=='较难')
          this.knNumber = res.data.filter(item=> item.difficultyRemark=='困难')
          this.questionSingle = res.data[0]
          res.data.forEach(item => {
            try {
              item.answer = JSON.parse(item.answer);
            } catch (error) {
              // 如果解析失败，给出错误提示并保留原始值
              console.error(`解析answer失败: ${error.message}`, item);
            }
          });
          // 1. 处理数据：提取x轴标签和选项数据
          const xAxisData = res.data.map(item => 
            `${item.questionTypeName}${item.questionNumber}`
          );
          // 收集所有出现过的选项（A,B,C,D等）
          const allOptions = new Set();
          res.data.forEach(item => {
            item.answer.forEach(ans => {
              if (item.questionType === 1) { 
                  // 客观题：使用option字段
                  if (ans.option) {
                    allOptions.add(ans.option);
                  }
                } else { 
                  // 主观题：使用segment字段
                  if (ans.segment) {
                    allOptions.add(ans.segment);
                  }
                }
            });
          });
          // 1. 收集选项并排序（保持不变）
            const optionList = Array.from(allOptions).sort();
            // 2. 定义颜色数组（从深蓝到浅蓝）
           const difficultyColors = {
            '简单': '#52c41a',    // 绿色（最简单）
            '较易': '#a0d995',    // 浅绿色
            '中等': '#faad14',    // 黄色
            '较难': '#fa8c16',    // 橙色
            '困难': '#f5222d'     // 红色（最难）
          };

            // 3. 准备系列数据：按 x 轴类目分组，每组内独立分配颜色
            // 3. 生成系列数据：同一难度内，颜色从基础色到浅色渐变
          const series = [];
          res.data.forEach((item, xIndex) => {
            // 当前难度的基础色
            const baseColor = difficultyColors[item.difficultyRemark] || difficultyColors['中等'];
            // 筛选当前难度下有数据的选项
            const validOptions = optionList.filter(option => {
              let ansItem;
              if (item.questionType === 1) {
                ansItem = item.answer.find(a => a.option === option);
              } else {
                ansItem = item.answer.find(a => a.segment === option);
              }
              return ansItem && ansItem.ration > 0;
            });

            // 为每个选项生成渐变色（按组内索引提亮）
            validOptions.forEach((option, groupIndex) => {
              // 计算提亮比例：组内第几个，就提亮多少（例如每组最多5个，每次提15%）
              const lightnessStep = 15; // 每次提亮15%
              const lightness = groupIndex * lightnessStep; // 0 → 0%，1 → 15%，2 → 30%...
              // 生成当前选项的颜色（基础色 + 提亮）
              const currentColor = this.lightenColor(baseColor, lightness);

              // 生成数据（仅当前x轴有值）
              const data = res.data.map((_, idx) => idx === xIndex 
                ? (() => {
                    let ansItem;
                    if (item.questionType === 1) {
                      ansItem = item.answer.find(a => a.option === option);
                    } else {
                      ansItem = item.answer.find(a => a.segment === option);
                    }
                    return ansItem ? ansItem.ration * 100 : 0;
                  })()
                : 0
              );

              // 推入系列
              series.push({
                type: 'bar',
                stack: 'total',
                emphasis: { focus: 'series' },
                data: data,
                rawData: res.data,
                itemStyle: {
                  color: currentColor // 使用动态提亮后的颜色
                }
              });
            });
          });
          // 3. 设置ECharts配置项
          this.bjsjdfl.setOption({
            dataZoom: [
              {
                type: 'slider', // 滑动条型数据缩放（支持鼠标拖拽缩放）
                show: true, // 显示滑动条
                xAxisIndex: 0, // 作用于第 0 个 x 轴
                start: 0, // 起始位置（百分比）
                end: Math.min(100, (5 / xAxisData.length) * 100), // 结束位置（默认显示前10项）
                handleSize: 8, // 滑块大小
                height: 15, // 滑动条高度
                bottom: 8, // 滑动条位置（底部）
                left: '8%', // 与 grid 左对齐
                right: '10%', // 与 grid 右对齐（确保滑块右侧不超出 grid 范围）
                // 限制缩放时不允许超出数据范围（避免空白区域）
                minSpan: 10, // 最小缩放跨度（防止缩太小）
                maxSpan: 100 // 最大缩放跨度（防止拉太大）
              },
              {
                type: 'inside', // 内置型数据缩放（支持鼠标滚轮缩放）
                xAxisIndex: 0,
                start: 0,
                end: Math.min(100, (5 / xAxisData.length) * 100)
              }
            ],
            tooltip: {
              trigger: 'axis',
              // axisPointer: { type: 'shadow' },
              // 自定义提示内容
              formatter: function(params) {
                console.info(params,'params')
                // params是当前悬停数据项的所有系列数据
                // 提取x轴名称（如问题名称/类别）
                let result = `${params[0].name}<br/>`;
                // 过滤出value>0的项（即当前柱状图中实际存在的option）
                const validItems = params.filter(item => item.value > 0);
                // 只显示有效的数据项
                validItems.forEach(item => {
                  result += `${item.seriesName}: ${item.value}%<br/>`;
                });
                return result;
              }
            },
            legend: {
              data: optionList, // 使用收集到的选项作为图例
              top: 0,
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '2%',
              containLabel: true,
            },
            xAxis: {
              type: 'category',
              data: xAxisData,
              // 调整 x 轴标签显示样式
              axisLabel: {
                rotate: 40,
                interval: 0,
                align: 'center',
                margin: 24,
                padding: [10, 0, 0, 0] // 调整标签位置
              },
              // 可选：调整网格边距，避免标签超出图表区域
              boundaryGap: true
            },
            yAxis: {
              type: 'value',
              name: '比例(%)',
              max: 100 // 比例最大值为100%
            },
            series: series
          });
          // 4. 添加点击事件处理
          this.bjsjdfl.on('click', (params) => {
            // params包含点击的详细信息
            const questionIndex = params.dataIndex; // 问题索引
            const optionName = params.seriesName; // 选项名称
            // 获取对应的原始数据
            const questionData = res.data[questionIndex];
            this.questionSingle = questionData
            // console.info(questionData,'questionData')
          });
      }else{
        this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    async getQuestionStatsTab(){
      const reqParams = {
          examId: this.xmxx.id,
          examSubjectId: this.subjectId || undefined, // 简化写法
          classId:this.$route.query.classId
      };
      const res = await getQuestionStats(reqParams)
      if(res.code==200){
        this.getQuestionStatsObj = res.data
      }else{
        this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    // 分数查询方法（依赖实例中的scoreData，无需额外传obj）
    getScoreRate(dimension, questionNumber) {
      // 层层判空，避免报错
      if (!this.scoreData[dimension]) return "-";
      
      const targetQuestion = this.scoreData[dimension].find(item => 
        item.questionNumber === questionNumber
      );
      return targetQuestion ? targetQuestion.rateScore : "-";
    },
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },

    handleCommand(command) {
      // this.$refs[command].scrollIntoView({ behavior: "smooth" });
      let offsetTop = this.getDistanceFromHtmlTop(this.$refs[command]);
      window.scrollTo({
        top: offsetTop - 20,
        behavior: "smooth",
      });
    },
    getDistanceFromHtmlTop(element) {
      if (!element) return 0;

      // 获取元素相对于视口的位置
      const rect = element.getBoundingClientRect();

      // 获取页面当前的滚动距离
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        0;

      // 计算绝对距离
      return Math.round(rect.top + scrollTop);
    },
    //临界生
    getSubjectLabel(subject) {
        return `${subject.examSubjectName}(${subject.lineScore})`;
    },
    
    // 获取学生特定科目的分数或贡献值
    getStudentScore(student, subjectId, field) {
        const subjectScore = student.subjectScores.find(
            score => score.examSubjectId === subjectId
        );
        
        if (subjectScore) {
            return subjectScore[field];
        }
        
        return '-';
    },
    
    // 根据贡献值正负设置样式类
    getContributionClass(student, subjectId) {
        const subjectScore = student.subjectScores.find(
            score => score.examSubjectId === subjectId
        );
        
        if (subjectScore) {
            return subjectScore.contribution >= 0 ? 
                'positive-contribution' : 'negative-contribution';
        }
        
        return '';
    },
    changeonline(val){
       this.ljsfxTab = val
       let result = this.ljsList.filter(item=>{return item.scoreLineTypeName==this.ljsfxTab})
         // 设置数据
        if (result && result.length > 0) {
            const data = result[0];
            // this.studentsCompleteList = data.scoreLineTypeName;
            this.students = data.students;
            this.subjects = data.subjects;
        }
    },
    async studentsCompleteTap(id){
      this.ljsLoading = true
      let obj={
        examId:id,
        classId:this.$route.query.classId,
        subjectGroup:this.type,
        isEndow:this.fftype
      }
      const res = await studentsComplete(obj)
      if(res && res.code==200){
        this.ljsLoading =  false
        this.ljsList = res.data
        let result = res.data.filter(item=>{return item.scoreLineTypeName==this.ljsfxTab})
         // 设置数据
        if (result && result.length > 0) {
            const data = result[0];
            // this.studentsCompleteList = data.scoreLineTypeName;
            this.students = data.students;
            this.subjects = data.subjects;
        }
        // this.studentsCompleteList = result
        console.info(result,'result')
      }else{
        this.$message({
          type:"warning",
          message:res.msg
        })
        this.ljsLoading = false
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  height: auto;
  width: 1300px;
  margin-left: auto;
  margin-right: auto;
  .positive-contribution {
      color: #165dff;
  }
  .negative-contribution {
      color: #f56c6c;
  }
  .bjmark p{
    margin:0;
    display: flex;
    align-items: center;
    padding:0 10px;
  }
  .bjmark i{
    display: inline-block;
    width:15px;
    height:15px;
    border-radius:15px;
    margin-right:8px;
  }
  .questionDiffcult{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    margin-top:12px;
    span{
        font-size:14px;
        color:#333;
        display: inline-block;
        margin-right:20px;
        display: flex;
        align-items: center;
        i{
          display: inline-block;
          margin-left:5px;
          font-size:14px;
          color:#fff;
          width: 44px;
          height: 20px;
          text-align:center;
          line-height:20px;
          font-style:normal
        }
        &:nth-child(1) i{
            background:#00B578
          }
          &:nth-child(2) i{
            background:#3662EC
          }
          &:nth-child(3) i{
            background:#8A38F5
          }
          &:nth-child(4) i{
            background:#FF8F1F
          }
          &:nth-child(5) i{
            background:#FA5151
          }
        
    }
  }
  .fangxiangSelect{
    display: flex;
    align-items: center;
    margin-bottom:15px;
  }
  .top-tabs {
    display: flex;
    padding: 0;
    padding-right: 24px;
    line-height: 54px;

    .page-back {
      height: 54px;
      color: #ffffff;
      background: #1a48db;
      font-size: 14px;
      font-weight: bold;
      margin-right: 24px;
      padding: 0 10px;
      text-align: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .el-tabs {
      width: calc(100% - 80px);
    }
  }

  h3,
  h4 {
    margin-top: 0;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  h3:not(:first-child) {
    margin-top: 40px;
  }
  .statistics-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;

    .statistics-item {
      width: 180px;
      text-align: center;
      p {
        margin: 0;
        line-height: 1.4;

        & + p {
          font-weight: bold;
          color: #722ed1;
        }
      }

      &:nth-child(2) p + p {
        color: #ff7d00;
      }
      &:nth-child(3) p + p {
        color: #0fc6c2;
      }
      &:nth-child(4) p + p {
        color: #165dff;
      }
    }
  }

  .echarts-box {
    height: 500px;

    &.yxsfb {
      display: flex;
      flex-wrap: wrap;

      div {
        width: 33%;
        height: 250px;
      }
    }
  }

  .flex {
    display: flex;
    height: 400px;
  }
}

.snippet {
  background: #f8f9fa;
  padding: 20px;
  margin-bottom: 20px;
  color: #999999;

  &.danger {
    color: #ea0000;
    background: #ffc7c7;

    h4 {
      color: #ea0000;
    }
  }
  &.mini {
    padding: 5px 20px;
    display: flex;
    align-items: center;
    .el-input {
      width: 100px;
      margin-left: 5px;
    }
  }
  h4 {
    font-weight: bold;
    color: #999999;
  }
  div {
    font-size: 16px;
    line-height: 30px;
  }
  .statistics-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .statistics-item {
      width: 180px;
      text-align: center;
      p {
        margin: 0;
        line-height: 1.4;

        & + p {
          font-weight: bold;
          color: #722ed1;
        }
      }

      &:nth-child(2) p + p {
        color: #ff7d00;
      }
      &:nth-child(3) p + p {
        color: #0fc6c2;
      }
      &:nth-child(4) p + p {
        color: #165dff;
      }
    }
  }
}
.roll {
  position: fixed;
  right: 100px;
  bottom: 150px;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 6px;
  border-radius: 50%;
  div {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  &.roll-top {
    right: 150px;
  }
}
</style>
<style scoped>
    >>> .el-tabs__item{
      padding:0 19px;
    }
</style>